<template>
	<div class="doc_pc_components_Poptip">
		<div>
			禁用:<Toggle
				v-model="disabled"
			/>
			<Poptip
				v-model="value"
				content="提示内容"
				:disabled="disabled"
			>
				<button>默认</button>
			</Poptip>
			v-model:{{value}}
			<Poptip
				:model-value="true"
				content="提示内容"
				:disabled="disabled"
				ref-class="test1"
				ref-style="padding:0 15px"
				style="margin-left:100px"
			>
				<button>强制显示:默认</button>
			</Poptip>
			<Poptip
				:model-value="true"
				:offset="12"
				trigger="click"
				content="offset自动影响箭头大小"
				:disabled="disabled"
			>
				<button>强制显示:click</button>
			</Poptip>
		</div>
		<div>
			<Poptip
				v-model="value2"
				interactive
				content="提示内容"
				:disabled="disabled"
			>
				<button>interactive</button>
			</Poptip>
			v-model:{{value2}}
		</div>
		<div>
			<Poptip
				v-model="value3"
				trigger="click"
				hide-on-click="toggle"
				content="超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容"
				:disabled="disabled"
				@show="log('show')"
				@shown="log('shown')"
				@hide="log('hide')"
				@hidden="log('hidden')"
			>
				<button>click</button>
			</Poptip>
			v-model:{{value3}}
			<button @click="value3=!value3">程序控制</button>
		</div>
		<div>
			appendTo:body
			<Poptip
				content="提示内容"
				:disabled="disabled"
				append-to="body"
			>
				<button>默认</button>
			</Poptip>
			<Poptip
				content="提示内容"
				interactive
				:disabled="disabled"
				append-to="body"
			>
				<button>interactive</button>
			</Poptip>
			<Poptip
				trigger="click"
				content="提示内容"
				hide-on-click
				:disabled="disabled"
				append-to="body"
			>
				<button>click</button>
			</Poptip>
			<Poptip
				trigger="click"
				content="提示内容"
				hide-on-click="toggle"
				:disabled="disabled"
				append-to="body"
			>
				<button>click(toggle)</button>
			</Poptip>
		</div>
		<div>
			appendTo:null
			<Poptip
				content="提示内容"
				:disabled="disabled"
				:append-to="null"
			>
				<button>默认</button>
			</Poptip>
			<Poptip
				content="提示内容"
				interactive
				:disabled="disabled"
				:append-to="null"
			>
				<button>interactive</button>
			</Poptip>
			<Poptip
				trigger="click"
				content="提示内容"
				hide-on-click
				:disabled="disabled"
				:append-to="null"
			>
				<button>click</button>
			</Poptip>
			<Poptip
				trigger="click"
				content="提示内容"
				hide-on-click="toggle"
				:disabled="disabled"
				:append-to="null"
			>
				<button>click(toggle)</button>
			</Poptip>
		</div>
		<div>
			初始动画:
			<Poptip
				v-model="value4"
				trigger="click"
				content="提示内容"
				:disabled="disabled"
				:append-to="null"
			>
				<button>默认</button>
			</Poptip>
			<Poptip
				v-model="value5"
				trigger="click"
				content="提示内容"
				appear
				:disabled="disabled"
				:append-to="null"
				style="margin-left:40px"
			>
				<button>默认</button>
			</Poptip>
			<Poptip
				v-model="value6"
				trigger="click"
				content="提示内容"
				:disabled="disabled"
				style="margin-left:40px"
			>
				<button>默认</button>
			</Poptip>
			<Poptip
				v-model="value7"
				trigger="click"
				content="提示内容"
				appear
				:disabled="disabled"
				style="margin-left:40px"
			>
				<button>默认</button>
			</Poptip>
		</div>
		<div>
			交互测试:
			<Poptip
				content="提示内容"
				interactive
				:interactive-border="20"
				:disabled="disabled"
			>
				<button>interactive</button>
			</Poptip>
			<Poptip
				content="提示内容"
				interactive
				:interactive-border="20"
				:disabled="disabled"
				:append-to="null"
			>
				<button>appendTo:null</button>
			</Poptip>
		</div>
		<div>
			<ScrollArea
				visible
				style="height:200px;width:200px;border:1px solid"
			>
				<div style="width:600px;height:600px;padding:100px">
					<Poptip
						:append-to="null"
						placement="left"
						interactive
						content="提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
					>
						<template #default>
							<button>自定义</button>
						</template>
						<template #content="{limitWidth,limitHeight}">
							<div
								:style="{
									maxWidth:`${limitWidth}px`,
									maxHeight:`${limitHeight}px`,
									background:'green',
									color:'#fff',
									overflow:'hidden',
									pointerEvents:'initial',
								}"
							>
								提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
							</div>
						</template>
					</Poptip>
				</div>
			</ScrollArea>
		</div>
		<div>
			<ScrollArea
				visible
				style="height:200px;width:200px;border:1px solid"
			>
				<div style="width:600px;height:600px;padding:100px">
					<Poptip
						append-to="body"
						placement="left"
						trigger="click"
						content="提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容"
					>
						<template #default>
							<button>自定义</button>
						</template>
						<template #content="{limitWidth,limitHeight}">
							<div
								:style="{
									maxWidth:limitWidth>350?'350px':limitWidth+'px',
									maxHeight:`${limitHeight}px`,
									background:'green',
									color:'#fff',
									overflow:'hidden',
									pointerEvents:'initial',
								}"
							>
								提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
							</div>
						</template>
					</Poptip>
				</div>
			</ScrollArea>
		</div>
	</div>
</template>

<script setup>
import {shallowRef} from 'vue';
import {Poptip,ScrollArea,Toggle} from 'powerful-ui/pc-default';

const disabled=shallowRef(false);
const value=shallowRef(false);
const value2=shallowRef(false);
const value3=shallowRef(false);
const value4=shallowRef(true);
const value5=shallowRef(true);
const value6=shallowRef(true);
const value7=shallowRef(true);

const {log}=console;
</script>

<style lang="scss">
.doc_pc_components_Poptip{
	>div{
		margin:20px;
	}
}
</style>